<script>
var currentSortObj="";
var paginationPageSize = 10;
$(document).ready(function() {
 
	$('#billDateFrom,#billDateTo').datepicker({
			changeMonth: true,
			changeYear: true,			 
			dateFormat: 'yy-mm-dd'
	});
	
	$(".sort").live("click",function(){
		loading();
		if($(this).attr("sortMethod") == "asc"){
			$(this).attr("sortMethod","desc"); 
		}else{
			$(this).attr("sortMethod","asc"); 
		}
		currentSortObj = {'sortColumn':$(this).attr("sortColumn"),
						  'sortMethod':$(this).attr("sortMethod")};
		loadData(paginationCurrentPage,paginationPageSize,currentSortObj);
		closeLoading();
	});
	initData(0);
});
function inquire(){
 initData(0);
	 
}
var currencyCode = "<{$balance->currency_code}>";
function loadData(page,pageSize,sortObj){
	var billDateFrom = $('[name=billDateFrom]').val();
	var billDateTo = $('[name=billDateTo]').val();
	var cbh_op_type = $('[name=cbh_op_type]').val();
	if(typeof sortObj == "undefined"){
		sortObj = currentSortObj;
	}
	$.ajax({
	  type: "POST",
	  async: false,
	  dataType: "json",
	  url: "/merchant/my-account/billing-detail",
	  data:{
			'page':page,'pageSize':pageSize,			
			'startTime':billDateFrom,'endTime':billDateTo,
			'cbh_op_type':cbh_op_type,
			'sortColumn':sortObj.sortColumn,
			'sortMethod':sortObj.sortMethod
			}, 
	  success: function(json) {
          paginationTotal = 	json.count;
          if(json.ask=="1"){
			var html= '';
			$.each(json.data,function(key,val){
			
				var cbhType;
				var deposit;
				var withdrawal;
				if((key+1)%2 ==1) {
					html += '<div style=""><div class="line1">';
				}else{
					html += '<div class="line2">';
				}
				html += '<div title="'+val.cbh_add_time+'" style="width:140px" class="cell cell-left">'+val.cbh_add_time+'</div>';
				 
				if(val.cbh_type=='-1'){
					cbhType = "payment";
					 
				}else{
					cbhType = "Deposit";
					 
				}
                if(val.cbh_class!='2'){
                    cbh_class='Standard';
                }else{
                    cbh_class='OnHold'
                }
				html += '<div title="'+cbhType+'" style="width:75px" class="cell">'+cbhType+'</div>';

                html += '<div style="width:75px" class="cell">'+cbh_class+'</div>';
				
				html += '<div title="'+val.cbh_base_value+' '+currencyCode+'" style="width:130px" class="cell">'+val.cbh_base_value+' '+currencyCode+'</div>';
				
				html += '<div title="'+val.cbh_current_value+' '+currencyCode+'" style="width:180px" class="cell">'+val.cbh_current_value+' '+currencyCode+'</div>';

				html += '<div title="'+val.balanceType+'" style="width:140px" class="cell cell-last">'+val.balanceType+'</div>';
				html += '</div>';
				html += '<div class="line-last" style="width:100%;text-align:left;">Note: '+val.cbh_note+'</div>';
                html += '</div>';
				
			});
		 
		 }else{
			html ='<div  class="billCol0" style="text-align:center;">No Data.</div>'
			 
		 }
		 $(".billData").html(html);
		 $("#billData").html(html)
		 $(".billData .line1").each(function(i){
						var h = $(this).height();//alert(h);
						$(".cell",$(this)).height(h);
						
						});
		$(".billData .line2").each(function(i){
						var h = $(this).height();//alert(h);
						$(".cell",$(this)).height(h);
						
						});
	  }
	}); 
}


	
</script> 
 
<style type="text/css">
 

.billCol1 {
    float: left;
    line-height: 25px;     
    width: 11%;
}
.billCol2 {
    float: left;
    line-height: 25px;     
    width: 10%;
}
.billCol3 {
    float: left;
    line-height: 25px;
    width: 15%;
}
.billCol4 {
    float: left;
    line-height: 25px;
    width: 15%;
}
.billCol5 {
    float: left;
    line-height: 25px;
    text-align: left;
    width: 15%;
}

.billCol6 {
    float: left;
    line-height: 25px;
    text-align: left;
    width: 10%;
}
.billCol7 {
    float: left;
    line-height: 25px;
    text-align: left;
    border-style:none;
    width: 23%;
}
.billCol0 {
    float: left;
    line-height: 25px;
    width: 100%;
}
div.billData{
	
}
.line1 {
	width: 100%;
	overflow: hidden;
    border-bottom: 1px solid #CCCCCC;
}
.line1:hover {
background-color:#F2F8F9;
}
.line2:hover {
background-color:#F2F8F9;
}

.line2 {
    border-bottom: 1px solid #CCCCCC;
    overflow: hidden;
    width: 100%;
}

.cell-last{
    background:none;
}
.line-last{
    height:30px;
    line-height:30px;
    border-bottom: 1px solid #CCCCCC;
}

.sort{cursor:pointer;}
.sort:hover{color:black;}

.billCol7 {
    border-style: none;
    float: left;
    line-height: 25px;
    text-align: left;
    width: 24%;
	border-right:0 none;
	background: url("") repeat-y right top;
    background-image: url("");
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-position-x: 100%;
    background-position-y: 0%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

.cell-note {
    background: url("/images/border.gif") repeat-y scroll right bottom transparent;
}
.cell3 {
    background: url("/images/border.gif") repeat-y scroll left top transparent;
    float: left;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    text-align: center;
}

</style>

<div class="position"><a href='/default/index'><{$languages['HOME']}></a> &gt; <a href='/merchant/my-account'><{$languages['MERCHANT_CENTER']}></a>  &gt; <{$languages['MY_ACCOUNT']}> &gt; <{$languages['ACCOUNT_INFO']}></div>

<div class="merchant-content" style="">
	<H4><{$languages['BALANCE']}></H4>
    <div style="margin:5px;border-bottom: 1px solid #CCCCCC;">
        <ul>
            <li style="height:25px;">
                <span class="user-alert-txt"><{$languages.USERID}>:</span>
                <span class="bold"><{$customerId}></span>
            </li>
            <li style="height:25px;">          
            <span class="user-alert-txt"><{$languages['BALANCE_SUMMARY']}>:</span>
            <span class="bold"><{if is_object($balance)}><{($balance->cb_value+$balance->cb_hold_value)|string_format:"%.2f"}> <{$balance->currency_code}><{/if}></span>
            </li>										 
            <li style="height:25px;">			 
            <span class="user-alert-txt"><{$languages['ON_HOLD_BALANCE']}>:</span>
            <span class="bold"><{if is_object($balance)}><{$balance->cb_hold_value}> <{$balance->currency_code}><{/if}></span>
            </li>
            <li style="height:25px;">
            <span class="user-alert-txt"><{$languages['AVAILABLE_BALANCE']}>:</span>
            <span class="bold"><{if is_object($balance)}><{$balance->cb_value}> <{$balance->currency_code}><{/if}></span>

            </li>
        </ul>	
    </div>	

    <div id="billing-form" style="margin-top:50px;">
        <form id="billing-detail" name="billing-detail" method="post" action="">
        <{$languages['Date_From']}>: <input class="billDateFrom" id="billDateFrom" name="billDateFrom" class="input-width-1"  type="text">
            <{$languages['TO']}> <input class="billDateTo" id="billDateTo" name="billDateTo" class="input-width-1"  type="text">
       <{$languages['TYPE']}> : <select name="cbh_op_type">
            <{foreach from=$languages['BALANCE_TYPE'] key=k item=val}>
                        <option value="<{$k}>"><{$val}></option>
            <{/foreach}>
                    </select>
        <span class="button-2" onclick="inquire()"><{$languages['SEARCH']}></span>
        <p> 
        </form>
    </div>

    <div style="margin-top:5px;">
        <div class="tab-div row">
            <div class="row height25 row-header">
                <div style="width:140px" class="cell sort" sortColumn="cbh_add_time"><{$languages['TIME']}></div>
                <div style="width:75px" class="cell sort" sortColumn="cbh_type"><{$languages['OPERATION_TYPE']}></div>
                <div style="width:75px" class="cell"><{$languages['STATUS']}></div>
                <div style="width:130px" class="cell sort" sortColumn="cbh_base_value"><{$languages['AMOUNT']}></div>
                <div style="width:180px" class="cell sort" sortColumn="cbh_current_value"><{$languages['CURRENT_BALANCE']}></div>
                <div style="width:130px" class="cell sort" sortColumn="cbh_type"><{$languages['TYPE']}></div>

            </div>                                
            <div class="billData"></div>
        </div>	
        <div class="pagination" style="padding-top:10px"></div>
    </div>
    
</div>